<template>
	<view>
		<!-- <an-nav-bar title="动态">
			<template :slot="'left'">
				<view class="coordinate">
					<uni-icons type="location-filled" size="20" color="#fff"></uni-icons>
					<view class="text">荣金龙汇苑小区</view>
					<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
				</view>
			</template>
			<template #title>
				<view class="technician-tabbar">
					<view :class="{'active-title':tabbarId == 1}">推荐</view>
					<view>关注</view>
				</view>
			</template>
		</an-nav-bar> -->
		<view class="nav">
			<view class="tabbar flex_sw">
				<view :class="{'active-tabbar':tabbarId == 1}" @click="onTab(1)">推荐</view>
				<view :class="{'active-tabbar':tabbarId == 2}" @click="onTab(2)">关注</view>
			</view>
		</view>
		<view style="height: calc(var(--status-bar-height) + 108rpx);"></view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in dynamiclist" :key="index">
				<view class="info flex" @click="$common.goPage('/pages/technicianDetail/technicianDetail?id='+item.massageTechnician.id)">
					<view class="avatar">
						<image v-if="item.massageTechnician && item.massageTechnician.headImg" :src="$common.binImage(item.massageTechnician.headImg)"></image>
						<image src="/static/serve-2.png"></image>
					</view>
					<view class="technician">
						<view class="name flex">
							<text v-if="item.massageTechnician && item.massageTechnician.nickName" class="left">{{item.massageTechnician.nickName}}</text>
							<text v-if="item.massageTechnician && item.massageTechnician.jobTitle" class="right">{{item.massageTechnician.jobTitle}}</text>
						</view>
						<view class="store_data flex">
							<view v-if="item.storeInfo" class="store iconfont flex">{{item.storeInfo.storeName}}</view>
						</view>
					</view>
					<view class="browse">{{item.viewNum}}浏览</view>
				</view>
				<view class="content"><text>{{item.content}}</text></view>
				<view v-if="item.imgUrl" class="media1" @click="$common.previewImage(item.imgUrl.split(',')[0])">
					<image :src="imgUrl+item.imgUrl.split(',')[0]" mode="widthFix"></image>
				</view>
				<view class="datas flex">
					<!-- <view class="address flex">
						<uni-icons type="location-filled" size="16" color="#AA8050"></uni-icons>
						距离{{$common.distance(item.distance)}}
					</view> -->
					<view class="uni-label-pointer">{{item.createTime}}</view>
				</view>
				<view class="praise" @click="dynamicLike(item)">
					<uni-icons type="hand-up-filled" size="16" color="#333333"></uni-icons>
					<text class="text">{{item.likeNum}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	export default {
		data() {
			return {
				imgUrl: indexConfig.imgUrl,

				tabbarId: 1,
				dynamiclist: [],
				userInfo: this.$mStore.state.userInfo,
				
				formValue: {},
				haveNext:true,
			};
		},
		onLoad() {
			this.initData()
			this.getList()
		},
		onShow() {
			uni.setTabBarStyle({
				"backgroundColor": "#ffffff",
				"color": "#B8B8B8",
				"selectedColor": "#333333",
			})
		},
		methods: {
			onTab(id) {
				this.tabbarId = id

				this.initData()
				this.getList()
			},
			initData() {
				this.formValue = {
					pageNum: 1,
					pageSize: 10,
					followDynamic: this.tabbarId == 2?true:false,
				}
			},
			getList() {
				this.$http.get('/appNoAuth/store/dynamic/list', this.formValue).then(res => {
					if (this.formValue.pageNum == 1) {
						this.dynamiclist = []
					}
					
					if (res && res.rows && res.rows.length) {
						this.dynamiclist = this.dynamiclist.concat(res.rows)
						this.formValue.pageNum++
					} else {
						this.haveNext=false
					}
				})
			},
			dynamicLike(item){
				if (item.likeStatus){
					this.$http.delete('/app/store/dynamicLike/'+item.id,{}).then(res => {
						item.likeStatus = false
						item.likeNum--
						
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						})
					})
				} else {
					this.$http.post('/app/store/dynamicLike', {
						dynamicId:item.id,
					}).then(res => {
						item.likeStatus = true
						item.likeNum++
						
						uni.showToast({
							icon: 'none',
							title: '点赞成功'
						})
					})
				}
			},
			setHits(item){
				this.$http.get('/appNoAuth/store/dynamic/view/'+item.id)
			},
		},
		onReachBottom() {
			if (this.haveNext) {
				this.getList()
			}
		},
	}
</script>
<style>
page {
	background-color:  #ffffff;
}
</style>
<style lang="scss" scoped>
	.nav {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		position: fixed;
		left: 0;
		top: 0;
		background: #f5f5f5;
		z-index: 999;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);

		.tabbar {
			width: 224rpx;
			height: 88rpx;
			margin: 0 auto;
			font-size: 36rpx;
			font-weight: 700;
			text-align: LEFT;
			color: #9e9e9e;
			line-height: 88rpx;
		}

		.active-tabbar {
			color: #333333;
			position: relative;

			&::after {
				content: "";
				width: 60rpx;
				height: 6rpx;
				background: linear-gradient(276deg, #aa8050 0%, #d7b075 100%);
				border-radius: 4rpx;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.list {
		padding: 0 30rpx;

		.list-item {
			padding: 30rpx 0 40rpx;
			position: relative;
			background-color: #fff;
			padding: 28rpx;
			border-radius: 20rpx;

			.praise {
				text-align: right;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.text{
					display: block;
					transform: translateY(-2rpx);
				}
			}

			.datas {
				margin: 20rpx 0;

				.address {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #aa8050;
					line-height: 34rpx;
				}

				.uni-label-pointer {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #9e9e9e;
					line-height: 34rpx;
					margin-left: 28rpx;
				}
			}

			.media1 {
				width: 634rpx;
				border-radius: 20rpx;

				image {
					width: 634rpx;
					height: 360rpx;
					border-radius: 20rpx;
				}
			}

			.content {
				margin: 20rpx 0;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}

			.info {
				display: flex;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.browse {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #9e9e9e;
					line-height: 34rpx;
				}

				.technician {
					flex: 1;

					.store_data {
						.store {
							height: 38rpx;
							background: #f8f8f8;
							border-radius: 60rpx;
							padding: 0 20rpx;
							height: 38rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #878787;
							line-height: 38rpx;
						}
					}


					.name {
						height: 40rpx;
						margin-bottom: 10rpx;

						.left {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							line-height: 40rpx;
						}

						.right {
							margin-left: 14rpx;
							display: inline-block;
							width: 112rpx;
							height: 32rpx;
							background: #ff638e;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #ffffff;
							line-height: 32rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.technician-tabbar {
		width: 200rpx;
		height: 88rpx;
		display: flex;
		justify-content: space-between;

		>view {
			height: 88rpx;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.active-title {
			font-size: 34rpx;
			font-weight: 700;
		}
	}

	.coordinate {
		width: 200rpx;
		height: 88rpx;
		display: flex;
		align-items: center;

		.text {
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #fff;
		}


	}
</style>
